<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人作品集</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">我的作品集</div>
            <ul class="nav-links">
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我</a></li>
                <li><a href="#projects">项目</a></li>
                <li><a href="#contact">联系我</a></li>
            </ul>
            <div class="theme-switcher">
                <button id="theme-toggle" class="theme-btn" onclick="toggleTheme()">🌙</button>
            </div>
            <div class="language-switcher">
                <button id="lang-zh" class="lang-btn active" onclick="switchLanguage('zh')">中文</button>
                <button id="lang-en" class="lang-btn" onclick="switchLanguage('en')">English</button>
            </div>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>欢迎来到我的作品集</h1>
                <p>我是前端开发者，专注于创建美观且功能强大的网站</p>
                <button class="cta-button">查看我的作品</button>
            </div>
        </section>

        <section id="about" class="about">
            <h2>关于我</h2>
            <div class="about-content">
                <div class="profile-image">
                    <img src="images/profile.png" alt="个人头像">
                </div>
                <div class="profile-text">
                    <p>我是一名Python Developer，擅长消息中间件、实时数据处理、高可用架构设计。</p>
                    <p>我喜欢Rust编程语言，同时也是幸运星、孤独摇滚、摇曳露营的粉丝。</p>
                    
                    <div class="skills">
                        <h3>技能标签</h3>
                        <div class="skill-tags">
                            <span class="skill-tag primary">Python</span>
                            <span class="skill-tag primary">MongoDB</span>
                            <span class="skill-tag secondary">Next.js</span>
                            <span class="skill-tag secondary">ElasticSearch</span>
                            <span class="skill-tag tertiary">Rust</span>
                        </div>
                    </div>
                    
                    <div class="achievements">
                        <h3>个人成就</h3>
                        <ul>
                            <li>清华大学优秀毕业生</li>
                            <li>微软MVP</li>
                            <li>华为开发者认证</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="timeline">
                <h3>专业经历</h3>
                <div class="timeline-content">
                    <div class="timeline-item">
                        <div class="timeline-year">2010-2014</div>
                        <div class="timeline-detail">
                            <h4>清华大学</h4>
                            <p>本科</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-year">2014-2016</div>
                        <div class="timeline-detail">
                            <h4>斯坦福大学</h4>
                            <p>硕士</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-year">2017-2020</div>
                        <div class="timeline-detail">
                            <h4>Google</h4>
                            <p>软件工程师</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-year">2021-2023</div>
                        <div class="timeline-detail">
                            <h4>OpenAI</h4>
                            <p>软件工程师</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="projects" class="projects">
            <h2>我的项目</h2>
            <div class="project-grid">
                <div class="project-card">
                    <img src="images/project1.jpg" alt="项目1">
                    <h3>项目名称1</h3>
                    <p>项目描述1</p>
                </div>
                <div class="project-card">
                    <img src="images/project2.jpg" alt="项目2">
                    <h3>项目名称2</h3>
                    <p>项目描述2</p>
                </div>
                <div class="project-card">
                    <img src="images/project3.jpg" alt="项目3">
                    <h3>项目名称3</h3>
                    <p>项目描述3</p>
                </div>
            </div>
        </section>

        <section id="contact" class="contact">
            <h2>📧 联系我</h2>
            <form id="contact-form">
                <input type="text" id="name" name="name" placeholder="您的姓名" required>
                <input type="email" id="email" name="email" placeholder="您的邮箱" required>
                <textarea id="message" name="message" placeholder="您的消息" required></textarea>
                <button type="submit">发送消息</button>
            </form>
            
            <div class="social-links">
                <h3>关注我</h3>
                <div class="social-icons">
                    <a href="https://kirineko.github.io" target="_blank" class="social-link">🌐 个人网页</a>
                    <a href="mailto:kirineko@qq.com" class="social-link">✉️ 邮箱</a>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 我的作品集. 保留所有权利.</p>
    </footer>

    <script src="languages.js"></script>
    <script src="main.js"></script>
</body>
</html>